import { computed, defineComponent, onBeforeUnmount, onMounted, reactive, ref, toRef, TransitionGroup } from "vue";
import './marketConditions.scss';
export default defineComponent({
    components: { TransitionGroup },
    props: {
        allData: Array
    },
    setup(props) {
        return () => (
            <div className="marketConditions">
                <p className="marketConditions-title">分市场情况</p>
                <div className="marketConditions-table">
                    <div className="marketConditions-table-header">
                        <p >市场</p>
                        <p >新店财务成功率</p>
                        <p>内部投资报酬率</p>
                        <p >个数</p>
                    </div>

                    <el-scrollbar>
                        <transition-group tag="ul" name="list">
                            {(props.allData || []).map((item, index) => (
                                <li key={item.name} className="marketConditions-table-body-th">
                                    <div style={{overflow: 'hidden', 'white-space': 'nowrap', 'text-overflow': 'ellipsis' }} className="marketConditions-table-body-th-td">{item.name}</div>
                                    <div className="marketConditions-table-body-th-td">
                                        <div className="line">
                                            <div style={{ width: `${item.data.HR}%` }} className="line-num">{item.data.HR}%</div>
                                        </div>
                                    </div>
                                    <div  className="marketConditions-table-body-th-td">{item.data.IRR}%</div>
                                    <div  className="marketConditions-table-body-th-td">{item.data.Unit}</div>
                                </li>
                            ))}
                        </transition-group>
                    </el-scrollbar>
                </div>
            </div>
        )
    }
})